<template>
  <div class="app-container">
    <el-card class="mb20">
      <el-form :model="listQF" inline>
        <el-form-item label="退货单号">
          <el-input v-model="listQF.returnNo" placeholder="退货单号"></el-input>
        </el-form-item>
        <el-form-item label="发货单号">
          <el-input
            v-model="listQF.deliveryNo"
            placeholder="发货单号"
          ></el-input>
        </el-form-item>
        <el-form-item label="合同编号">
          <el-input
            v-model="listQF.contractNo"
            placeholder="合同编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="客户名称">
          <el-select v-model="listQF.customerName" placeholder="客户名称">
            <el-option
              v-for="item in customerList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="退货日期">
          <el-date-picker
            v-model="listQF.returnDate"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="入库状态">
          <el-select v-model="listQF.deliveryStatus" placeholder="入库状态">
            <el-option value="未入库">未入库</el-option>
            <el-option value="已入库">已入库</el-option>
            <el-option value="入库中">入库中</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button @click="ResetList">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-button @click="OpenAddDialog">新增</el-button>
      <el-button @click="handleDel(true)">删除</el-button>
      <el-table :data="list" @selection-change="selectionChange">
        <el-table-column type="selection"></el-table-column>
        <el-table-column
          v-for="item in listColumn"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
        ></el-table-column>
        <el-table-column label="操作" v-slot="{ row }" width="280px">
          <div>
            <el-button type="primary" size="mini" @click="OpenEditDialog(row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDel(false, row.id)"
              >删除</el-button
            >
          </div>
        </el-table-column>
      </el-table>
      <el-pagination
        style="display: flex; justify-content: right"
        @size-change="PagerLimitChange"
        @current-change="PagerPageChange"
        :current-page="pager.page"
        :page-sizes="[2, 10, 30, 40]"
        :page-size="pager.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.total"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      center
      width="1200px"
      :visible="visible"
      :title="title"
      @close="close"
      :close-on-click-modal="false"
    >
      <el-form inline ref="listRef" :model="listEF">
        <el-form-item label="发货单号" prop="deliveryId" required>
          <el-input
            v-model="listEF.deliveryNo"
            disabled
            placeholder="发货单号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="OpenDeliveryD">选择</el-button>
        </el-form-item>
        <el-form-item label="退货日期" prop="returnDate" required>
          <el-date-picker
            v-model="listEF.returnDate"
            type="datetime"
            placeholder="退货日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="退货原因" prop="deliveryId">
          <el-input
            v-model="listEF.returnReason"
            placeholder="退货原因"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="deliveryId">
          <el-input
            type="textarea"
            v-model="listEF.remark"
            placeholder="备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <el-table :data="detailList">
        <el-table-column v-slot="{ $index }">
          {{ $index + 1 }}
        </el-table-column>
        <el-table-column
          v-for="item in detailColumn"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
        >
          <template v-if="item.prop == 'returnQuantity'" v-slot="{ row }">
            <el-input-number
              size="mini"
              :max="row.deliveryQuantity"
              :min="0"
              v-model="row.returnQuantity"
            ></el-input-number>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div>
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="handlesubmit">保存</el-button>
          <el-button type="primary" @click="handlesubmit">提交</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      center
      width="1400px"
      :visible="deliveryVisible"
      title="选择发货单"
      @close="deliveryVisible = false"
    >
      <div class="mb20">
        <el-form :model="saleDeliveryQueryForm" inline>
          <el-form-item label="发货编号">
            <el-input
              v-model="saleDeliveryQueryForm.deliveryNo"
              placeholder="发货编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="合同编号">
            <el-input
              v-model="saleDeliveryQueryForm.contractNo"
              placeholder="合同编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="客户名称">
            <el-select
              v-model="saleDeliveryQueryForm.customerName"
              placeholder="客户名称"
            >
              <el-option
                v-for="item in customerList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="交货日期">
            <el-date-picker
              v-model="saleDeliveryQueryForm.deliveryAttr"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getSaleDeliveryList"
              >查询</el-button
            >
            <el-button @click="resetSaleDeliveryList">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="saleDeliveryList">
        <el-table-column
          v-for="item in saleDeliveryColumn"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
        ></el-table-column>
        <el-table-column label="操作" v-slot="{ row }" width="280px">
          <div>
            <el-button type="primary" size="mini" @click="selectDelivery(row)"
              >选择</el-button
            >
          </div>
        </el-table-column>
      </el-table>
      <el-pagination
        style="display: flex; justify-content: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="saleDeliveryPager.page"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="saleDeliveryPager.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="saleDeliveryPager.total"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import { getSaleReturnList, editSaleReturn, addSaleReturn, delSaleReturn } from '@/api_zc/scm/sale-management/sale-return'
import { getCustomerList } from '@/api_zc/task/sale-order-approve'
import { getSaleDeliveryList } from '@/api_zc/scm/sale-management/sale-delivery'
export default {
  mounted () {
    this.getList()
    this.getSaleDeliveryList()
  },
  data () {
    return {
      pager: {
        limit: 10,
        page: 1,
        total: 0
      },
      list: [],
      listColumn: [
        {
          label: '编号',
          prop: 'id'
        },
        {
          label: '退货单号',
          prop: 'returnNo'
        },
        {
          label: '发货单号',
          prop: 'deliveryNo'
        },
        {
          label: '合同编号',
          prop: 'contractNo'
        },
        {
          label: '客户名称',
          prop: 'customer.name'
        },
        {
          label: '退货日期',
          prop: 'returnDate'
        },
        {
          label: '退货金额',
          prop: 'refundAmount'
        },
        {
          label: '入库状态',
          prop: 'deliveryStatus'
        },
      ],
      listQF: {
        returnNo: '',
        deliveryNo: '',
        contractNo: '',
        customerName: '',
        returnDate: [],
        returnStartDate: '',
        returnEndDate: '',
        deliveryStatus: '',
      },
      listEF: {
        id: '',
        deliveryId: '',
        deliveryNo: '',
        returnDate: '',
        returnReason: '',
        remark: ''
      },
      visible: false,
      title: '修改销售退货',
      ids: [],
      detailList: [],
      detailColumn: [
        {
          label: '物料',
          prop: 'material.name'
        },
        {
          label: '型号',
          prop: 'material.model'
        },
        {
          label: '规格',
          prop: 'material.specification'
        },
        {
          label: '单位',
          prop: 'material.unit'
        },
        {
          label: '单价',
          prop: 'price',
          width: '150px'
        },
        {
          label: '订货数量',
          prop: 'quantity',
          width: '150px'
        },
        {
          label: '发货数量',
          prop: 'deliveryQuantity'
        },
        {
          label: '退货数量',
          prop: 'returnQuantity',
          width: '150px'
        },
        {
          label: '备注',
          prop: 'remark'
        },
      ],
      customerList: [],
      deliveryVisible: false,
      saleDeliveryQueryForm: {
        deliveryNo: '',
        contractNo: '',
        customerName: '',
        deliveryStartDate: '',
        deliveryEndDate: '',
        deliveryAttr: [],
        deliveryStatus: '',
        createTime: [],
        createStartTime: '',
        createEndTime: ''
      },
      saleDeliveryList: [],
      saleDeliveryPager: {
        page: 1,
        limit: 10,
        total: 0
      },
      saleDeliveryColumn: [
        {
          label: '编号',
          prop: 'id'
        },
        {
          label: '发货编号',
          prop: 'deliveryNo'
        },
        {
          label: '合同编号',
          prop: 'contract.contractNo'
        },
        {
          label: '客户名称',
          prop: 'customer.name'
        },
        {
          label: '送货方式',
          prop: 'deliveryMethod'
        },
        {
          label: '交货日期',
          prop: 'deliveryDate'
        },
        {
          label: '收货地址',
          prop: 'deliveryAddress'
        },
        {
          label: '联系人',
          prop: 'contact'
        },
        {
          label: '联系电话',
          prop: 'phone'
        },
        {
          label: '出库状态',
          prop: 'deliveryStatus'
        },
        {
          label: '创建时间',
          prop: 'createTime'
        },
      ],
    }
  },
  methods: {
    async getUnityList () {
      const { data: { content } } = await getCustomerList()
      this.customerList = content
    },
    async getList () {
      if (!this.listQF.returnDate) {  //可修改
        return
      }
      ;[this.listQF.returnStartDate, this.listQF.returnEndDate] = this.listQF.returnDate  //可修改
      const { data: { total, content } } = await getSaleReturnList({ ...this.listQF, page: this.pager.page, limit: this.pager.limit })
      this.list = content
      this.pager.total = total
    },
    ResetList () {
      Object.assign(this.listQF, this.$options.data().listQF)
      this.getList()
    },
    PagerLimitChange (val) {
      this.pager.limit = val
      this.getList()
    },
    PagerPageChange (val) {
      this.pager.page = val
      this.getList()
    },
    OpenEditDialog (row) {
      this.isAdd = false
      this.visible = true
      for (let key in row) {
        if (row.hasOwnProperty(key)) {
          if (this.listEF.hasOwnProperty(key)) {
            this.listEF[key] = row[key]
          }
        }
      }
      this.detailList = row.detailList
      this.title = '修改销售退货'
      this.$nextTick(() => {
        this.$refs.listRef.resetFields()
      })
    },
    OpenAddDialog () {
      this.isAdd = true
      this.visible = true
      this.title = '添加销售退货'
      this.$nextTick(() => {
        for (let key in this.listEF) {
          this.listEF[key] = ''
        }
        this.$refs.listRef.resetFields()
      })
    },
    close () {
      this.visible = false
      this.detailList = []
    },
    handleDel (status, id) {
      let ids = []
      if (status) {
        ids = this.ids
      } else {
        ids[0] = id
      }
      this.$confirm(`是否确认删除销售退货编号为${ids.join(',')}的数据项？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delSaleReturn({ ids })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    selectionChange (selectArray) {
      this.ids = selectArray.map(item => item.id)
    },


    OpenDeliveryD () {
      this.deliveryVisible = true
    },
    async getSaleDeliveryList () {
      if (!this.saleDeliveryQueryForm.deliveryAttr) {
        return
      }
      if (!this.saleDeliveryQueryForm.createTime) {
        return
      }
      ;[this.saleDeliveryQueryForm.deliveryStartDate, this.saleDeliveryQueryForm.deliveryEndDate] = this.saleDeliveryQueryForm.deliveryAttr
        ;[this.saleDeliveryQueryForm.createStartTime, this.saleDeliveryQueryForm.createEndTime] = this.saleDeliveryQueryForm.createTime
      const { data: { total, content } } = await getSaleDeliveryList({
        ...this.saleDeliveryQueryForm,
        page: this.saleDeliveryPager.page,
        limit: this.saleDeliveryPager.limit
      })
      this.saleDeliveryList = content
      this.saleDeliveryPager.total = total
    },
    resetSaleDeliveryList () {
      Object.assign(this.saleDeliveryQueryForm, this.$options.data().saleDeliveryQueryForm)
      this.getSaleDeliveryList()
    },
    handleSizeChange (val) {
      this.saleDeliveryPager.limit = val
      this.getSaleDeliveryList()
    },
    handleCurrentChange (val) {
      this.saleDeliveryPager.page = val
      this.getSaleDeliveryList()
    },
    selectDelivery (row) {
      console.log(row)
      if (this.isAdd) {
        row.detailList.forEach(item => {
          this.$set(item, 'returnQuantity', 0)
        })
        this.detailList = row.detailList
      }
      this.listEF.deliveryId = row.id
      this.listEF.deliveryNo = row.deliveryNo
      this.deliveryVisible = false
    },
    handlesubmit () {
      this.$refs.listRef.validate(async (callback) => {
        if (!callback) {
          return
        }
        this.listEF.returnDate = new Date(this.listEF.returnDate)
        if (this.isAdd) {
          await addSaleReturn({ ...this.listEF, detailList: this.detailList })
          this.$message.success('新建成功')
        } else {
          await editSaleReturn({ ...this.listEF, detailList: this.detailList })
          this.$message.success('修改成功')
        }
        this.visible = false
        this.getList()
        this.detailList = []
      })
    }
  }
}
</script>

<style>
</style>